<template>
  <div class="hello">
    <h1 v-on:click="qwe()">{{ msg }}</h1>
    <myTemplate :parameter='myTemplateParameter' ref="myTemplateFunction"></myTemplate>
  </div>
</template>

<script>
import myTemplateVue from './myTemplate.vue'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld',
      myTemplateParameter: '我是模板'
    }
  },
  components: {
    myTemplate: myTemplateVue
  },
  beforeCreate: function () {
    console.log('beforeCreate 创建前状态===============》');
    // console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
    // console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
    // console.log("%c%s", "color:red","message: " + this.message)  
  },
  created: function () {
    console.log('created 创建完毕状态===============》');
    // console.log("%c%s", "color:red","el     : " + this.$el); //undefined
    // console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
    // console.log("%c%s", "color:red","message: " + this.message); //已被初始化
  },
  beforeMount: function () {
    console.log('beforeMount 挂载前状态===============》');
    // console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
    // console.log(this.$el);
    // console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
    // console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
  },
  mounted: function () {
    console.log('mounted 挂载结束状态===============》');
    // console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
    // console.log(this.$el);    
    // console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
    // console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
  },
  beforeUpdate: function () {
    console.log('beforeUpdate 更新前状态===============》');
    // console.log("%c%s", "color:red","el     : " + this.$el);
    // console.log(this.$el);   
    // console.log("%c%s", "color:red","data   : " + this.$data); 
    // console.log("%c%s", "color:red","message: " + this.message); 
  },
  updated: function () {
    console.log('updated 更新完成状态===============》');
    // console.log("%c%s", "color:red","el     : " + this.$el);
    // console.log(this.$el); 
    // console.log("%c%s", "color:red","data   : " + this.$data); 
    // console.log("%c%s", "color:red","message: " + this.message); 
  },
  beforeDestroy: function () {
    console.log('beforeDestroy 销毁前状态===============》');
    // console.log("%c%s", "color:red","el     : " + this.$el);
    // console.log(this.$el);    
    // console.log("%c%s", "color:red","data   : " + this.$data); 
    // console.log("%c%s", "color:red","message: " + this.message); 
  },
  destroyed: function () {
    console.log('destroyed 销毁完成状态===============》');
    // console.log("%c%s", "color:red","el     : " + this.$el);
    // console.log(this.$el);  
    // console.log("%c%s", "color:red","data   : " + this.$data); 
    // console.log("%c%s", "color:red","message: " + this.message)
  },
  methods: {
    qwe: function() {
      console.log('methods')
      this.$refs.myTemplateFunction.alert()
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
